<template>
 <div id="product">
    <van-nav-bar
        title="商品"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <!-- 轮播 -->
    <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img class="swipeImg" v-lazy="image.img_url" />
        </van-swipe-item>
    </van-swipe>
    <div class="info">
        <span>30天无忧退货</span>
        <span>48小时快速退款</span>
        <span>满88免邮费</span>
    </div>

    <div class="proInfo">
        <h3 class="titel">{{info.name}}</h3>
        <p class="brief">{{info.goods_brief}}</p>
        <p class="price">￥{{info.retail_price}}</p>
    </div>

    <van-cell title="请选择规格数量" is-link />

    <!-- 商品参数 -->
    <div class="proParams">
        <h3>商品参数</h3>
        <div class="proItem" v-for="(item1,index1) in attribute" :key="index1">
            <span class="titel">{{item1.name}}</span>
            <span class="value">{{item1.value}}</span>
        </div>
    </div>

    <!-- 商品详情 -->
    <div class="proDetail" v-html="info.goods_desc">
    </div>

    <!-- 加入购物车/付款 -->
    <van-goods-action>
        <van-goods-action-icon to="/buycart"
        :info="$store.state.cartTotal.goodsCount==0? '': $store.state.cartTotal.goodsCount" 
        icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star-o" text="已收藏" color="#ff5000" />
        <van-goods-action-button @click="chooseSku" type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 商品规格 -->
    <van-sku
        v-model="showSku"
        :sku="sku"
        :goods="goods"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
    />
 </div>
</template>
<script>
import axios from 'axios'
let sku={
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: '颜色', // skuKeyName：规格类目名称
      v: [
        {
          id: '30349', // skuValueId：规格值 id
          name: '红色', // skuValueName：规格值名称
        },
        {
          id: '1215',
          name: '蓝色',
        }
      ],
      k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
    }
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId，下单时后端需要
      price: 100, // 价格（单位分）
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      stock_num: 30 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId，下单时后端需要
      price: 100, // 价格（单位分）
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      stock_num: 20 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId，下单时后端需要
      price: 100, // 价格（单位分）
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
      stock_num: 50 // 当前 sku 组合对应的库存
    }
  ],
  price: '1.00', // 默认价格（单位元）
  stock_num: 227, // 商品总库存
}
export default {
    props:['id'],
    data(){
        return{
            data:{},
            info:{},
            attribute:[],
            showSku:false,
            sku:sku,
            goods:{
                title:'',
                picture:''

            }
        }
    },
    computed:{
        images:function(){
            if(this.data.gallery==undefined){
                return []
            }else{
                return this.data.gallery
            }
        }
    },
    async created(){
       this.$store.dispatch('AjaxCart')
       let res=await axios.get(this.$root.api.GoodsDetail,{params:{id:this.id}})
       this.data=res.data.data
       this.info=this.data.info

       this.attribute=this.data.attribute
       this.goods.picture=this.info.primary_pic_url
       this.goods.title=this.info.name
       this.sku.price=this.info.retail_price
       this.sku.stock_num=this.info.goods_number

       let tree=[]
       this.data.specificationList.forEach((item)=>{
           let arr=[]
           item.valueList.forEach((product,i)=>{
               arr.push({
                   id:product.id,
                   name:product.value
               })
           })
           tree.push(
               {
                    k: item.name, // skuKeyName：规格类目名称
                    v: arr,
                    k_s: "s-"+item.specification_id // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                }

           )
       })
       this.sku.tree=tree
       

       
    },
    methods:{
        onClickLeft(){
        this.$router.go(-1)
        },
        //提交到订单页
        onBuyClicked(){

        },
        //添加到购物车
        async onAddCartClicked(skuData){
            this.showSku=false
            console.log(skuData)
            let chooseContent=skuData.selectedSkuComb['s-1']+'_'+skuData.selectedSkuComb['s-2']
            let resultPro=this.data.productList.filter((item,index)=>{
                if(item.goods_specification_ids==chooseContent){
                    return true
                }else{
                    return false
                }
            })
            let cartRes=await axios.post(this.$root.api.CartAdd,{
                goodsId: resultPro[0].goods_id, 
                number: skuData.selectedNum, 
                productId: resultPro[0].id
            })

            //console.log(cartRes.data)
            let data=cartRes.data.data
            this.$store.commit('setCartList',data.cartList)
            this.$store.commit('setCartTotal',data.cartTotal)
        },
        chooseSku(){
            this.showSku=true
        }
    }
}
</script>
<style lang="less">
    #product{
        .swipeImg{
            width: 100%;
        }
        .info{
            display: flex;
            justify-content: space-around;
            font-size: 11px;
            color: #999;
            height: 24px;
            line-height: 24px;
            background: #efefef;
            span{
                position: relative;
            }
            span::before{
                content: "";
                display: block;
                position: absolute;
                left: -10px;
                top: 8px;
                width: 4px;
                height: 4px;
                border-radius: 2px;
                border: 1px solid red;
            }
        }
        .proInfo{
            .titel{
                font-weight: 500;
                padding: 10px 0 5px;
            }
            .brief{
                font-size: 12px;
                color: #999;
                padding: 5px;
            }
            .price{
                font-size: 15px;
                color: red;
                padding: 7px;
            }
        }
        .van-cell__title{
            text-align: left;
        }
        .proParams{
            padding-bottom: 20px;
            h3{
                padding: 10px 0;
            }
            .proItem{
                width: 90%;
                margin:0 auto;
                display: flex;
                justify-content: space-between;
                height: 24px;
                font-size: 12px;
                color: #999;
                background: #efefef;
                line-height: 24px;
                text-align: left;
                span.title{
                    width: 40px;
                    padding: 0 10px;
                    border-right: 2px solid #ccc;
                }
                span.value{
                    width: 260px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

        }
        .proDetail{
            width: 100%;
            img{
                width: 100%;
            }
            p{
                display: flex;
            }
        }
    }
    
</style>